<template>
  <el-dialog
    v-model="popup.visible"
    title="弹出层"
    modal-class="popup-dialog"
    :show-close="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    align-center
    destroy-on-close
  >
    <component ref="refChild" :is="components[popup.component]"></component>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="Ready">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ShowPopup } from "@/stores/popup";
import TemplateList from "./TemplateList.vue";
import TemplateSave from "./TemplateSave.vue";

const popup = ShowPopup();

const refChild = ref(null);

const components = {
  list: TemplateList,
  save: TemplateSave,
};

const Ready = () => {
  refChild.value.Ready((flag) => {
    if (flag) {
      popup.setter(false);
    }
  });
};

const Cancel = () => {
  popup.setter(false);
};
</script>

<style lang="scss">
.popup-dialog {
  .el-dialog {
    width: auto;
  }
}
</style>
